<template>
  <a-form ref="formRef" :model="form" :label-col="labelCol" :wrapper-col="wrapperCol" size="default">
    <slot name="form-item-subProcess-name" :model="form" field="name">
      <a-form-item label="流程定义名称">
        <a-input v-model:value="form.name" />
      </a-form-item>
    </slot>
    <slot name="form-item-subProcess-displayName" :model="form" field="displayName">
      <a-form-item label="流程定义显示名称">
        <a-input v-model:value="form.displayName" />
      </a-form-item>
    </slot>
    <slot name="form-item-subProcess-expireTime" :model="form" field="expireTime">
      <a-form-item label="期望完成时间">
        <a-input v-model:value="form.expireTime" />
      </a-form-item>
    </slot>
    <slot name="form-item-subProcess-instanceUrl" :model="form" field="instanceUrl">
      <a-form-item label="实例启动Url">
        <a-input v-model:value="form.instanceUrl" />
      </a-form-item>
    </slot>
    <slot name="form-item-subProcess-instanceNoClass" :model="form" field="instanceNoClass">
      <a-form-item label="实例编号生成类">
        <a-input v-model:value="form.instanceNoClass" />
      </a-form-item>
    </slot>
    <slot name="form-item-subProcess-preInterceptors" :model="form" field="preInterceptors">
      <a-form-item label="节点前置拦截器">
        <a-input v-model:value="form.preInterceptors" />
      </a-form-item>
    </slot>
    <slot name="form-item-subProcess-postInterceptors" :model="form" field="postInterceptors">
      <a-form-item label="节点后置拦截器">
        <a-input v-model:value="form.postInterceptors" />
      </a-form-item>
    </slot>
  </a-form>
</template>
<script lang="ts" setup>
  import { reactive, ref, watch, defineProps, onMounted, defineEmits } from 'vue';
  import { FlowFormModel } from '../types';
  // 注意:ref不能与model一样，相同的话表单双向绑定将会失效
  const formRef = ref(null);
  const form = reactive<FlowFormModel>({} as FlowFormModel);
  // 定义属性
  const props = defineProps<{
    value: FlowFormModel;
  }>();
  const emits = defineEmits(['update:value']);
  watch(
    () => form,
    () => {
      emits('update:value', Object.assign(props.value, form));
    },
    { deep: true }
  );

  onMounted(() => {
    Object.assign(form, props.value);
  });
</script>
